<script setup lang="ts">
  import { usePermission } from '@/hooks/usePermission'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, onMounted, computed } from 'vue'
  import FilterNavbar from '@/components/FilterNavbar'
  import useList from '@/hooks/useList'
  import OrderItem from './components/orderItem.vue'
  import { onBackPress } from '@dcloudio/uni-app'

  const tabs = ['全部', '维修中', '待维修', '维修完成', '已关闭']
  const actived = ref(0)

  const searchList = computed(() => {
    return [
      {
        prop: 'carSiteIdList',
        label: '车辆当前归属门店',
        type: 'remote-select',
        attrs: {
          type: 'site',
          multiple: true,
          params: {
            idList: queryParam.value.carSiteIdList,
          },
        },
      },
      {
        prop: 'siteIdList',
        label: '维修单关联门店',
        type: 'remote-select',
        attrs: {
          type: 'site',
          multiple: true,
          params: {
            idList: queryParam.value.siteIdList,
          },
        },
      },
      {
        prop: ['timeStart', 'timeEnd'],
        label: '维修周期',
        type: 'daterange-picker',
      },
      {
        prop: 'undertakerIdList',
        label: '负责人',
        type: 'remote-select',
        attrs: {
          type: 'staff_all_bysite',
          multiple: true,
          params: {
            oldIdList: queryParam.value.undertakerIdList,
          },
        },
      },
      {
        prop: 'repairShopId',
        label: '修理厂',
        type: 'remote-select',
        attrs: {
          type: 'supplierRepair',
          params: {
            oldIdList: queryParam.value.repairShopId,
          },
        },
      },
    ]
  })
  const tabsChange = (e: number) => {
    var i: any[] = []
    if (e == 0) {
      i = []
    }
    if (e == 1) {
      i = [1]
    }
    if (e == 2) {
      i = [0]
    }
    if (e == 3) {
      i = [2]
    }
    if (e == 4) {
      i = [7]
    }
    queryParam.value.statusList = i
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()
  }
  const searchBarSearch = (e: string) => {
    // searchBarSearch事件 自带搜索？
    queryParam.value.licenseNoOrOrderNoLike = e
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()
  }
  const queryParam = ref<any>({})
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/repair/pageList',
    queryParam,
  )
  const add = () => {
    uni.navigateTo({ url: 'form/index?pageType=create' })
  }
  const onFilterNavbarConfirm = (params: any) => {
    if (params.times) {
      queryParam.value.timeStart = params.times[0]
      queryParam.value.timeEnd = params.times[1]
    }
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    resetRefresh()
  }
  uni.$on('loadData', function (data) {
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()
  })
  onMounted(() => {
    loadData()
  })
  onLoad((options: any) => {
    if (options.siteId) {
      queryParam.value.siteIdList = options.siteId ? [Number(options.siteId)] : undefined
      searchList.value[0].attrs.label = options.siteName ? options.siteName : undefined
    }
    if (options.status) {
      actived.value = 2
      queryParam.value.statusList = [0]
    }
  })
  onBackPress((e) => {
    // return true
  })
</script>

<template>
  <view class="container">
    <FilterNavbar :searchList="searchList" v-model:queryParam="queryParam" @confirm="onFilterNavbarConfirm">
      <template #center>
        <view class="navbar-title"> 车辆维修 </view>
      </template>
    </FilterNavbar>
    <view class="page-filter">
      <ve-search-bar placeholder="请输入车牌号/关联单号" @search="searchBarSearch"></ve-search-bar>
      <ve-tabs :actived="actived" :list="tabs" @change="tabsChange" />
    </view>
    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <OrderItem v-for="record in dataSource" :record="record" :key="record.id" />
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
    <ve-bottom-box v-if="usePermission('svmsapp:car-repair.add')">
      <ve-button type="primary" @click="add" style="width: 100%">新增车辆维修</ve-button>
    </ve-bottom-box>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background-color: rgba(247, 248, 250, 1);
    padding-bottom: 132rpx;
  }
  .container {
    height: 100vh;
    background: #f7f8fa;
  }
  .record-list {
    padding: 24rpx 24rpx;
  }
  .manager-search {
    position: sticky;
    top: 44px;
    z-index: 999;
  }
  .manager-tabs {
    background-color: #fff;
  }
  .ve-bottom-box {
    height: auto;
  }
</style>
